import { Form, Input, Card, Radio, Button, Checkbox, Row, Col, message, PageHeader } from 'antd'
import React, { FC, useEffect, useState } from 'react'
import { changeSize } from '@utils/electron'
import { history } from 'umi';
import { insertProject, projectDetail, projectUpdate } from '@/services/project'
import { getAllDatabaseList } from '@/services/database'
const FormItem = Form.Item

const formTailLayout = {
  labelCol:{span:7},
  wrapperCol:{ span: 15 }
}
interface HandleFormProps {
  location:any,
}

const HandleForm: FC<HandleFormProps> = (props) => {

  const [form] = Form.useForm()
  const [detail, setDetail] = useState<any>({})
  const [database, setDatabase] = useState<any>([])

  const { location:{query :{projectId}} } = props

  useEffect(() => {
    let title = '添加项目'

    getAllDatabaseList().then((res:any) => {
      if (res.code == 10000) {
        res.data.length > 0 ?setDatabase(res.data) : message.warning('请先去首页->数据库管理进行数据库添加再新建项目！')
      }
    })

    if (projectId) {
      title = '编辑项目'
      projectDetail(projectId).then((res:any) =>{
        if (res.code == 10000) {
          setDetail(res.data)
          form.resetFields();
        }
      })
    }
    changeSize(850,850,title);
  },[]);

  const submit =async () =>{
    const { validateFields } = form;
    const values = await validateFields();
    // 更新
    if (detail.id) {
      values.id = detail.id
      await projectUpdate(values).then((res=> {
        if (res.code == 10000) {
          message.success('保存成功');
          history.push('/')
        }else {
          message.error('保存失败请重试！');
        }
      }));
    }else {
      //插入
      await insertProject(values).then(res => {
        if (res.code == 10000) {
          message.success('保存成功');
          history.push('/')
        }else {
          message.error('保存失败请重试！');
        }
      })
    }
  }

  return (
    <div style={{ backgroundColor: '#fff' }}>
    <PageHeader
      onBack={() => history.push('/')}
      title="项目管理"
      subTitle={projectId ? '项目修改' : '项目创建'}
    />
    <Card>
      <Form form={form} initialValues={detail} onFinish={()=> submit()}>
        <FormItem {...formTailLayout} name="name"  rules={[{ required: true, message: '请输入项目名称' }]} label="项目名称">
          <Input placeholder="请输入项目名称(英文字母)"/>
        </FormItem>
        <FormItem {...formTailLayout} name="description"  rules={[{ required: true, message: '请输入项目介绍' }]} label="项目介绍">
          <Input placeholder="请输入项目介绍"/>
        </FormItem>
        <FormItem {...formTailLayout} name="group_id"  rules={[{ required: true, message: '请输入GroupId' }]} label="GroupId">
          <Input placeholder="请输入GroupId,如：com.test"/>
        </FormItem>
        <FormItem {...formTailLayout} name="artifact_id"  rules={[{ required: true, message: '请输入ArtifactId' }]} label="ArtifactId">
          <Input placeholder="请输入ArtifactId,如：test_rest"/>
        </FormItem>
        <FormItem {...formTailLayout} name="gen_web"  rules={[{ required: true, message: '请选择' }]} label="生成WebView">
          <Radio.Group>
            <Radio value="yes">是</Radio>
            <Radio value="no">否</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem {...formTailLayout} name="package_type"  rules={[{ required: true, message: '请选择' }]} label="结构">
          <Radio.Group>
            <Radio value="standard">standard</Radio>
            <Radio value="module">module</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem {...formTailLayout} name="pro_type"  rules={[{ required: true, message: '请选择' }]} label="项目类型">
          <Radio.Group>
            <Radio value="micro">微服务</Radio>
            <Radio value="simple">单应用</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem {...formTailLayout} name="version"  rules={[{ required: true, message: '请输入项目版本' }]} label="项目版本">
          <Input placeholder="请输入项目版本"/>
        </FormItem>
        <FormItem {...formTailLayout} name="context_path"  rules={[{ required: true, message: '请输入访问路径' }]} label="访问路径">
          <Input placeholder="请输入访问路径"/>
        </FormItem>
        <FormItem {...formTailLayout} name="local_path"  rules={[{ required: true, message: '请输入项目生成路径' }]} label="生成路径">
          <Input placeholder="请输入项目生成路径"/>
        </FormItem>
        <FormItem {...formTailLayout} style={{height:'200'}} name='dbIds' rules={[{ required: true, message: '至少选择一项' }]} label="数据库" >
          <Checkbox.Group style={{width:'100%'}}>
            <Row>
              {database.map((item:any) => (
                <Col span={8}>
                  <Checkbox value={item.id} style={{ lineHeight: '32px' }}>
                    {item.db_name}
                  </Checkbox>
                </Col>
                )
              )}
            </Row>
          </Checkbox.Group>
        </FormItem>
        <Form.Item  style={{textAlign:'right',marginRight:50}}>
          <Button onClick={() => history.push('/')} style={{marginRight:10}}>关闭</Button>
          <Button type="primary" htmlType="submit">保存</Button>
        </Form.Item>
      </Form>
    </Card>
  </div>
  )
}

export default HandleForm
